<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>x性能界面</title>
    <script src="../static/js/echarts.min.js"></script>
    <style>
      #box{
        width: 100%;
        /* height: 300px; */
        background-color: rgb(232, 232, 232);
        margin:0;
        padding: 0%;
        color: rgb(195, 140, 0);
        font-family: "微软雅黑";
      }
        #FP{
        width: 50%;
        /* height: 50%; */
        float: left;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        font-family: "微软雅黑";
    }
    #FCP{
        width: 50%;
        /* height: 50%; */
        float: left;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        font-family: "微软雅黑";
    }
    #DOMReady{
        width: 50%;
        /* height: 50%; */
        float: left;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        font-family: "微软雅黑";
    }
    #DNS{
        width: 50%;
        /* height: 50%; */
        float: left;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        font-family: "微软雅黑";
    }
    #main{
     width: 50%;
     height: 300px;
     float: left;
    }
    #second{
     width: 50%;
     height: 300px;
     float: left;
    }
    #third{
     width: 50%;
     height: 300px;
     float: left;
    }
    #fourth{
     width: 50%;
     height: 300px;
     float: left;
    }
    </style>
</head>
<body>
    <div style="height: 200px;">
        <h2 style="text-align:center">页面平均耗时</h2>
        <hr class="layui-border-blue">
        <div id="box">
           <div style="float: left;width: 50%;" id="FP"><h4>首次绘制：</h4></div> 
            <div style="float: left;width: 50%;" id="FCP"><h4>首次内容绘制：</h4></div>
            <div style="float: left;width: 50%;" id="DOMReady"><h4>页面准备：</h4></div>
            <div style="float: left;width: 50%;" id="DNS"><h4>DNS解析：</h4></div>
        </div>
    </div>
    <br>
    <hr class="layui-border-blue">
    <div id="main"></div>
    <div id="second" style="width: 50%;height: 300px;float: left;"></div>
    <div id="third" style="width: 50%;height: 300px;float: left;"></div>
    <div id="fourth" style="width: 50%;height: 300px;float: left;"></div>
    <script type="text/javascript">
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost:3000/get_performance', true);
        xhr.send();
        xhr.onload=function(){
          // console.log(xhr.response);
          let res = JSON.parse(xhr.response);
          // console.log(res.FP[0]);
          
            var mycharts1=echarts.init(document.getElementById("main"));
            var mycharts2=echarts.init(document.getElementById("second"));
            var mycharts3=echarts.init(document.getElementById("third"));
            var mycharts4=echarts.init(document.getElementById("fourth"));
            var option1={
                title:{
                    text:'FP'
                },
                tooltip:{},
                legend:{
                    data:['FP']
                },
                xAxis:{
                    type:'category',        //坐标轴类型：类目轴
                    data:res.FP[1]
                },
                yAxis:{
                    type:'value'        //坐标轴类型：数值轴
                },
                series:[{
                    name:'FP',
                    type:'line',
                    data:res.FP[2],
                    smooth:true,        //平滑曲线图。值可为数字      
                }]
            };
            
            var option2={
                title:{
                    text:'FCP'
                },
                tooltip:{},
                legend:{
                    data:['FCP']
                },
                xAxis:{
                    type:'category',        //坐标轴类型：类目轴
                    data:res.FCP[1]
                },
                yAxis:{
                    type:'value'        //坐标轴类型：数值轴
                },
                series:[{
                    name:'FCP',
                    type:'line',
                    data:res.FCP[2],
                    smooth:true,        //平滑曲线图。值可为数字      
                }]
            };

            var option3={
                title:{
                    text:'DNSTime'
                },
                tooltip:{},
                legend:{
                    data:['DNSTime']
                },
                xAxis:{
                    type:'category',        //坐标轴类型：类目轴
                    data:res.DNSTime[1]
                },
                yAxis:{
                    type:'value'        //坐标轴类型：数值轴
                },
                series:[{
                    name:'DNSTime',
                    type:'line',
                    data:res.DNSTime[2],
                    smooth:true,        //平滑曲线图。值可为数字      
                }]
            };

            var option4={
                title:{
                    text:'DOMReady'
                },
                tooltip:{},
                legend:{
                    data:['DOMReady']
                },
                xAxis:{
                    type:'category',        //坐标轴类型：类目轴
                    data:res.DOMReady[1]
                },
                yAxis:{
                    type:'value'        //坐标轴类型：数值轴
                },
                series:[{
                    name:'DOMReady',
                    type:'line',
                    data: res.DOMReady[2],
                    smooth:true,        //平滑曲线图。值可为数字      
                }]
            };
            option1 && mycharts1.setOption(option1);
            option2 && mycharts2.setOption(option2);
            option3 && mycharts3.setOption(option3);
            option4 && mycharts4.setOption(option4);
            document.getElementById("FP").innerHTML="首次绘制: "+res.FP[0]+"ms";
            document.getElementById("FCP").innerHTML="首次内容绘制: "+res.FCP[0]+"ms";
            document.getElementById("DOMReady").innerHTML="页面准备: "+res.DOMReady[0]+"ms";
            document.getElementById("DNS").innerHTML="DNS解析: "+res.DNSTime[0]+"ms"; 
        }
        



        
    </script>
</body>
</html>
